<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script>
      //   1. 循环数组
      //   区别一：
      //   for in 和
      //   for of 都可以循环数组，
      //   for in 输出的是数组的index下标， 而for of 输出的是数组的每一项的值。

      const arr = ["张科顺", "无敌"];

      // for ... in
      for (const key in arr) {
        console.log(key); // 输出 0,1,2,3
      }

      // for ... of 遍历的都是线性对象    for ... of 遍历的都是带有iterator接口的 有索引且索引都是0,1,2,3
      for (const key of arr) {
        console.log(key); // 输出 值
      }
      console.dir(arr);
   
      let i = arr[Symbol.iterator]();
      console.dir(i.next());

      //   const object1 = {
      //     name: "无敌暴龙王",
      //     age: 42,
      //   };

      //   console.log(Object.entries(object1));
      //   for (const [key, value] of Object.entries(object1)) {
      //     console.log(`${key}: ${value}`);
      //   }

      // 如何让对象遍历for ...of
      const objj = {
        name: "css",
        age: 18,
        list: [1, 2, 3, 4],
      };
      Object.prototype[Symbol.iterator] = function value() {
        let index = 0;
        return {
          next: () => {
            return {
              value: this.list[index++],
              done: this.list.length + 1 === index ? true : false,
            };
          },
        };
      };
      const res = objj[Symbol.iterator]();
      console.log(objj, "ssssssss");
      console.log(res.next());
      console.log(res.next());
      console.log(res.next());
      console.log(res.next());
      console.log(res.next());
      for (const i of objj) {
        console.log(i);
      }
      console.log([...objj], "迭代器剩余参数");
      //   2. 循环对象

      //   区别二：
      //   for in 可以遍历对象，
      //   for of 不能遍历对象， 只能遍历带有iterator接口的， 例如Set, Map, String, Array

      //   const object = {
      //     name: "lx",
      //     age: 23,
      //   };
      //   // for ... in
      //   for (const key in object) {
      //     console.log(key); // 输出 name,age
      //     console.log(object[key]); // 输出 lx,23
      //   }

      //   // for ... of
      //   for (const key of object) {
      //     console.log(key); // 报错 Uncaught TypeError: object is not iterable
      //   }
      //   // 3. 数组对象

      //   const list = [
      //     {
      //       name: "lx",
      //     },
      //     {
      //       age: 23,
      //     },
      //   ];
      //   for (const val of list) {
      //     console.log(val); // 输出{ name: 'lx' }, { age: 23 }
      //     for (const key in val) {
      //       console.log(val[key]); // 输出 lx,23
      //     }
      //   }

      //   // 总结：
      //   // for in适合遍历对象，
      //   // for of适合遍历数组。
      //   // for in遍历的是数组的索引， 对象的属性， 以及原型链上的属性。

      //   let obj = [1, 2, 3, 4];
      //   // for of不用于对象
      //   // Array， Map， Set， String， TypedArray， arguments
      //   for (const i of obj) {
      //     console.log(i); //1,2,34
      //   }

      //   const str = "welcome to javacript";
      //   for (const i of str) {
      //     console.log(i); // w e l c o m e
      //   }
    </script>
  </body>
</html>
